<nz-breadcrumb style="margin:16px 0;">
  <nz-breadcrumb-item>{{ 'task.list.任务列表' | translate }}</nz-breadcrumb-item>
</nz-breadcrumb>
<div style="background:#fff; padding: 24px; min-height: 280px;">

  <nz-modal class="modalStyle" [(nzVisible)]="isJobVisible" [(nzOkLoading)]="jobLoading" [(nzTitle)]="modalTitle"
    (nzOnCancel)="handleJobCancel()" (nzOnOk)="handleJobOk()">

    <form nz-form [formGroup]="validateJobForm">

      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired nzFor="jobName">{{ 'task.list.modal.label.任务组名' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <input nz-input placeholder="请输入任务组名" formControlName="jobGroup" [(ngModel)]="jobInfoEntity.jobGroup">
          <nz-form-explain *ngIf="validateJobForm.get('jobGroup').dirty && validateJobForm.get('jobGroup').errors">
            任务组名必填</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired nzFor="jobName">{{ 'task.list.modal.label.任务名称' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <input nz-input placeholder="请输入任务名称" formControlName="jobName" [(ngModel)]="jobInfoEntity.jobName">
          <nz-form-explain *ngIf="validateJobForm.get('jobName').dirty && validateJobForm.get('jobName').errors">任务名称必填
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired nzFor="jobName">{{ 'task.list.modal.label.任务类型' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <nz-select formControlName="jobType" [(ngModel)]="jobInfoEntity.jobType"
            (ngModelChange)="changeJobType($event)">
            <nz-option nzValue="1" nzLabel="Url"></nz-option>
            <nz-option nzValue="2" nzLabel="{{ 'task.list.modal.label.邮件' | translate }}"></nz-option>
            <nz-option nzValue="3" nzLabel="MQTT"></nz-option>
            <nz-option nzValue="4" nzLabel="RabbitMQ"></nz-option>
            <nz-option nzValue="5" [nzDisabled]="'disabled'" nzLabel="{{ 'task.list.modal.label.热加载' | translate }}">
            </nz-option>
          </nz-select>
          <nz-form-explain *ngIf="validateJobForm.get('jobType').dirty && validateJobForm.get('jobType').errors">任务类型必填
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="validateJobForm.get('jobType').value == 1">
        <nz-form-label [nzSpan]="6" nzRequired nzFor="requestUrl">{{ 'task.list.modal.label.请求地址' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <input nz-input formControlName="requestUrl" placeholder="请输入请求地址" [(ngModel)]="jobInfoEntity.requestUrl">
          <nz-form-explain *ngIf="validateJobForm.get('requestUrl').dirty && validateJobForm.get('requestUrl').errors">
            请求地址必填</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="validateJobForm.get('jobType').value == 1">
        <nz-form-label [nzSpan]="6" nzRequired nzFor="requestType">{{ 'task.list.modal.label.请求类型' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <nz-radio-group formControlName="requestType" [(ngModel)]="jobInfoEntity.requestType">
            <label nz-radio nzValue="1">Get</label>
            <label nz-radio nzValue="2">Post</label>
            <label nz-radio nzValue="4">Put</label>
            <label nz-radio nzValue="8">Delete</label>
          </nz-radio-group>
          <nz-form-explain
            *ngIf="validateJobForm.get('requestType').dirty && validateJobForm.get('requestType').errors">请求类型必填
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="validateJobForm.get('jobType').value == 2">
        <nz-form-label [nzSpan]="6" nzRequired nzFor="mailTitle">{{ 'task.list.modal.label.邮件标题' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <input nz-input formControlName="mailTitle" placeholder="请输入邮件标题" [(ngModel)]="jobInfoEntity.mailTitle">
          <nz-form-explain *ngIf="validateJobForm.get('mailTitle').dirty && validateJobForm.get('mailTitle').errors">
            邮件标题必填</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="validateJobForm.get('jobType').value == 2">
        <nz-form-label [nzSpan]="6" nzFor="mailContent">{{ 'task.list.modal.label.邮件内容' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <textarea row="4" formControlName="mailContent" placeholder="请输入邮件内容" nz-input
            [(ngModel)]="jobInfoEntity.mailContent"></textarea>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="validateJobForm.get('jobType').value == 2">
        <nz-form-label [nzSpan]="6" nzRequired nzFor="mailTo">{{ 'task.list.modal.label.收件邮箱' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <input nz-input formControlName="mailTo" placeholder="请输入收件邮箱，多个邮箱用','分割。" [(ngModel)]="jobInfoEntity.mailTo">
          <nz-form-explain *ngIf="validateJobForm.get('mailTo').dirty && validateJobForm.get('mailTo').errors">
            收件邮箱必填</nz-form-explain>
        </nz-form-control>
      </nz-form-item>     

      <nz-form-item *ngIf="validateJobForm.get('jobType').value == 3">
        <nz-form-label [nzSpan]="6" nzRequired nzFor="topic">{{ 'task.list.modal.label.主题' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <input nz-input formControlName="topic" placeholder="请输入Topic主题" [(ngModel)]="jobInfoEntity.topic">
          <nz-form-explain *ngIf="validateJobForm.get('topic').dirty && validateJobForm.get('topic').errors">
            Topic主题必填</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="validateJobForm.get('jobType').value == 3">
        <nz-form-label [nzSpan]="6" nzRequired nzFor="payload">{{ 'task.list.modal.label.消息' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <textarea row="4" nz-input formControlName="payload" placeholder="请输入Payload消息"
            [(ngModel)]="jobInfoEntity.payload">
            </textarea>
          <nz-form-explain *ngIf="validateJobForm.get('payload').dirty && validateJobForm.get('payload').errors">
            Payload消息必填</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="validateJobForm.get('jobType').value == 4">
        <nz-form-label [nzSpan]="6" nzRequired nzFor="topic">{{ 'task.list.modal.label.队列名称' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <input nz-input formControlName="rabbitQueue" placeholder="请输入Queue队列名称"
            [(ngModel)]="jobInfoEntity.rabbitQueue">
          <nz-form-explain
            *ngIf="validateJobForm.get('rabbitQueue').dirty && validateJobForm.get('rabbitQueue').errors">
            Queue队列名称必填</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="validateJobForm.get('jobType').value == 4">
        <nz-form-label [nzSpan]="6" nzRequired nzFor="payload">{{ 'task.list.modal.label.主体内容' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <textarea row="4" nz-input formControlName="rabbitBody" placeholder="请输入Body内容"
            [(ngModel)]="jobInfoEntity.rabbitBody">
          </textarea>
          <nz-form-explain *ngIf="validateJobForm.get('rabbitBody').dirty && validateJobForm.get('rabbitBody').errors">
            Body内容必填</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired nzFor="beginTime">{{ 'task.list.modal.label.开始时间' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <nz-date-picker style="width: 100%;" formControlName="beginTime" [(ngModel)]="jobInfoEntity.beginTime"
            nzShowTime></nz-date-picker>
          <nz-form-explain *ngIf="validateJobForm.get('beginTime').dirty && validateJobForm.get('beginTime').errors">
            开始时间必填</nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzFor="endTime">{{ 'task.list.modal.label.结束时间' | translate }}</nz-form-label>
        <nz-form-control [nzSpan]="15">
          <nz-date-picker formControlName="endTime" [(ngModel)]="jobInfoEntity.endTime" nzShowTime></nz-date-picker>
          <nz-form-explain *ngIf="validateJobForm.get('endTime').dirty && validateJobForm.get('endTime').errors">
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzRequired nzFor="triggerType">{{ 'task.list.modal.label.触发器类型' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <nz-select formControlName="triggerType" [(ngModel)]="jobInfoEntity.triggerType"
            (ngModelChange)="changeTriggerType($event)">
            <nz-option nzValue="2" nzLabel="Simple"></nz-option>
            <nz-option nzValue="1" nzLabel="Cron"></nz-option>
          </nz-select>
          <nz-form-explain
            *ngIf="validateJobForm.get('triggerType').dirty && validateJobForm.get('triggerType').errors">触发器类型必填
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="isCron">
        <nz-form-label [nzSpan]="6" nzRequired nzFor="cron">{{ 'task.list.modal.label.Cron表达式' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <input nz-input formControlName="cron" placeholder="请输入Cron表达式" [(ngModel)]="jobInfoEntity.cron">
          <nz-form-explain *ngIf="validateJobForm.get('cron').dirty && validateJobForm.get('cron').errors">Cron表达式必填
          </nz-form-explain>
        </nz-form-control>
        <nz-tag [nzColor]="'#2db7f5'">
          <a href=" https://www.bejson.com/othertools/cron/ "
            target="_blank">{{ 'task.list.modal.label.参考' | translate }}</a>
        </nz-tag>
      </nz-form-item>

      <nz-form-item *ngIf="!isCron">
        <nz-form-label [nzSpan]="6" nzRequired nzFor="intervalSecond">{{ 'task.list.modal.label.间隔时间' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <nz-input-group nzCompact>
            <input style="width: 70%;" nz-input formControlName="intervalSecond" placeholder="请输入间隔时间"
              [(ngModel)]="jobInfoEntity.intervalSecond">
            <nz-select style="width: 30%; " formControlName="intervalUnit">
              <nz-option nzValue="1" nzLabel="{{ 'task.list.modal.label.秒' | translate }}"></nz-option>
              <nz-option nzValue="60" nzLabel="{{ 'task.list.modal.label.分' | translate }}"></nz-option>
              <nz-option nzValue="3600" nzLabel="{{ 'task.list.modal.label.时' | translate }}"></nz-option>
              <nz-option nzValue="86400" nzLabel="{{ 'task.list.modal.label.天' | translate }}"></nz-option>
            </nz-select>
          </nz-input-group>
          <nz-form-explain
            *ngIf="validateJobForm.get('intervalSecond').dirty && validateJobForm.get('intervalSecond').errors">间隔时间必填
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="validateJobForm.get('jobType').value == 1">
        <nz-form-label [nzSpan]="6" nzFor="headers">{{ 'task.list.modal.label.请求头' | translate }}</nz-form-label>
        <nz-form-control [nzSpan]="15">
          <input nz-input formControlName="headers" type="{{showPass?'text':'password'}}"
            title='格式：{"key":"value","key2":"value2"}' placeholder="请输入Headers信息，如：Cookies、授权认证等"
            [(ngModel)]="jobInfoEntity.headers">
        </nz-form-control>
        <img class="yanjing" (click)="switchPass()" src="{{showPassIocUrl}}" />
      </nz-form-item>

      <nz-form-item *ngIf="validateJobForm.get('jobType').value == 1">
        <nz-form-label [nzSpan]="6" nzFor="requestParameters">{{ 'task.list.modal.label.请求参数' | translate }}
        </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <textarea row="4" formControlName="requestParameters" title='格式：{"key":"value","key2":"value2"}'
            placeholder="请输入请求参数（json字符串）" nz-input [(ngModel)]="jobInfoEntity.requestParameters"></textarea>
          <nz-form-explain
            *ngIf="validateJobForm.get('requestParameters').dirty && validateJobForm.get('requestParameters').errors">
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6">{{ 'task.list.modal.label.任务描述' | translate }} </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <textarea row="4" formControlName="description" placeholder="请输入任务描述" nz-input
            [(ngModel)]="jobInfoEntity.description"></textarea>
          <nz-form-explain
            *ngIf="validateJobForm.get('description').dirty && validateJobForm.get('description').errors">
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6">{{ 'task.list.modal.label.邮件通知' | translate }} </nz-form-label>
        <nz-form-control [nzSpan]="15">
          <nz-radio-group formControlName="mailMessage">
            <label nz-radio nzValue="0">{{ 'task.list.modal.label.不通知' | translate }}</label>
            <label nz-radio nzValue="1"
              title="只有当任务出现异常时发送通知(需要在'系统设置'邮件)">{{ 'task.list.modal.label.通知异常' | translate }}</label>
            <label nz-radio nzValue="2"
              title="每次执行一个任务都发送邮件通知(需要在'系统设置'邮件)">{{ 'task.list.modal.label.通知所有' | translate }}</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
    </form>
  </nz-modal>
  <!-- 新增任务 （初始化没有任务）-->
  <button *ngIf="!resultData.length" nz-button [nzType]="'primary'" [nzSize]="'small'"
    (click)="showJobModal('default')">
    <span>{{ 'task.list.table.th.button.新增任务' | translate }}</span>
  </button>
  <!-- 任务列表 -->
  <nz-collapse>
    <nz-collapse-panel *ngFor="let panel of resultData" [nzHeader]="panel.groupName"
      (nzActiveChange)="clickPanel($event,panel.groupName)" [nzActive]="panel.active">

      <table class="jobTable">
        <tr>
          <th style="width: 7%;">{{ 'task.list.table.th.任务名称' | translate }}</th>
          <th class="tb-center" style="width: 4%;">{{ 'task.list.table.th.状态' | translate }}</th>
          <th class="tb-center" style="width: 4%;">{{ 'task.list.table.th.请求次数' | translate }} </th>
          <th class="tb-center" style="width: 4%;">{{ 'task.list.table.th.任务类型' | translate }} </th>
          <th class="tb-center" style="width: 9%;" class="td-url">{{ 'task.list.table.th.Url' | translate }}</th>
          <th class="tb-center" style="width: 4%;">{{ 'task.list.table.th.异常信息' | translate }}</th>
          <th class="tb-center" style="width: 9%;">{{ 'task.list.table.th.上次执行时间' | translate }}</th>
          <th class="tb-center" style="width: 9%;">{{ 'task.list.table.th.下次执行时间' | translate }}</th>
          <th class="tb-center" style="width: 4%;">{{ 'task.list.table.th.执行计划' | translate }}</th>
          <th style="width: 7%;">{{ 'task.list.table.th.描述' | translate }}</th>
          <th style="width: 9%;">
            <button nz-button [nzSize]="'small'" [nzType]="'primary'" (click)="showJobModal(panel.groupName)">
              <span>{{ 'task.list.table.th.button.新增任务' | translate }}</span>
            </button>
          </th>
        </tr>
        <tr *ngFor="let jobInfo of panel.jobInfoList">
          <td>
            {{ jobInfo.name}}
          </td>
          <td class="tb-center">
            <nz-tag [nzColor]="jobInfo.stateColor">{{ jobInfo.stateTranslate | translate}}</nz-tag>
          </td>
          <td class="tb-center">
            <!-- <nz-tag>{{ jobInfo.requestTypeDispaly}}</nz-tag> -->
            {{ jobInfo.runNumber}}
          </td>
          <td class="tb-center">
            <nz-tag [nzColor]="jobInfo.jobTypeColor" class="tag-jobtype">
              {{'task.list.table.th.jobType.'+jobInfo.jobType | translate}}</nz-tag>
          </td>
          <td class="td-url" title="{{ jobInfo.triggerAddress}}">
            {{ jobInfo.requestTypeDispaly && jobInfo.requestTypeDispaly+' - '}}{{ jobInfo.triggerAddress}}
          </td>
          <td class="tb-center">
            <nz-tag nzMode="closeable" *ngIf="jobInfo.lastErrMsg" [nzColor]="'red'"
              (nzOnClose)="onClose(jobInfo.name,panel.groupName)" (nzAfterClose)="afterClose()"
              (click)="showModalMsg('异常',jobInfo.lastErrMsg)">{{ 'task.list.table.th.tag.查看' | translate }}</nz-tag>
            <span *ngIf="!jobInfo.lastErrMsg">--</span>
          </td>
          <td class="tb-center">
            {{ jobInfo.previousFireTime| date:'yyyy-MM-dd HH:mm:ss'}}
          </td>
          <td class="tb-center">
            {{ jobInfo.nextFireTime| date:'yyyy-MM-dd HH:mm:ss'}}
          </td>
          <td class="tb-center">
            {{ jobInfo.interval}}
          </td>
          <td title=' {{ jobInfo.description||""}}'>
            {{ jobInfo.description||"--"}}
          </td>
          <td>
            <button [nzSize]="'small'" *ngIf="jobInfo.displayState==='暂停'" nz-button
              [disabled]="jobInfo.bt_restore_loading" (click)="resumeJob(jobInfo,panel.groupName)"
              nzType="default">{{ 'task.list.table.th.button.恢复' | translate }}</button>
            <button [nzSize]="'small'" *ngIf="jobInfo.displayState!=='暂停'" nz-button
              [disabled]="jobInfo.bt_suspended_loading" (click)="stopJob(jobInfo,panel.groupName)"
              nzType="default">{{ 'task.list.table.th.button.暂停' | translate }}</button>
            <nz-popconfirm [nzTitle]="'你确定删除这个任务？'" (nzOnConfirm)="removeJob(jobInfo,panel.groupName)"
              (nzOnCancel)="confirm()">
              <a nz-popconfirm>
                <button [nzSize]="'small'" nz-button nzType="danger" [disabled]="jobInfo.bt_del_loading"
                  style="margin-left: 5px; margin-right: 5px;">{{ 'task.list.table.th.button.删除' | translate }}</button>
              </a>
            </nz-popconfirm>
            <nz-dropdown nzTrigger="click">
              <button [nzSize]="'small'" nz-button nz-dropdown>
                <span>{{ 'task.list.table.th.button.更多' | translate }}</span>
                <i class="anticon anticon-down"></i>
              </button>
              <ul nz-menu style="border: 1px solid #D9D9D9;background-color: rgb(245, 245, 245)">
                <li nz-menu-item>
                  <a>
                    <button [nzSize]="'small'" nz-button [disabled]="jobInfo.bt_edit_loading"
                      (click)="editJob(jobInfo,panel.groupName)">{{ 'task.list.table.th.button.编辑' | translate }}</button>
                  </a>
                </li>
                <li nz-menu-item>
                  <a>
                    <button [nzSize]="'small'" nz-button [disabled]="jobInfo.bt_copy_loading"
                      (click)="copyJob(jobInfo,panel.groupName)">{{ 'task.list.table.th.button.复制' | translate }}</button>
                  </a>
                </li>
                <li nz-menu-item>
                  <a>
                    <button [nzSize]="'small'" nz-button [disabled]="jobInfo.bt_trigger_loading"
                      (click)="triggerJob(jobInfo,panel.groupName)">{{ 'task.list.table.th.button.执行' | translate }}</button>
                  </a>
                </li>
                <li nz-menu-item>
                  <a>
                    <button [nzSize]="'small'" nz-button [disabled]="jobInfo.bt_log_loading"
                      (click)="getJobLogs(jobInfo,panel.groupName)">{{ 'task.list.table.th.button.日志' | translate }}</button>
                  </a>
                </li>
              </ul>
            </nz-dropdown>

          </td>
        </tr>
      </table>
    </nz-collapse-panel>
  </nz-collapse>
</div>